import React, { useState } from 'react'
import One from './One';
import Two from './Two';
import Three from './Three';

export default function DiffCom() {
    //声明一个注释
  let [count, setCount] = useState(0);
  
  return (
    <div style={{paddingLeft: 30}}>
      <h2>diff</h2>
      <h3>{count}</h3>
      <button onClick={() => {
        setCount(v => v + 1);
      }}>新增 +1</button>
      <hr />
      <h2>更新前后为不同的元素</h2>
      {count % 2 === 0 ? <span>hello</span> : <div>hello</div>}
      <h2>更新前后为相同的元素</h2>
      {count % 2 === 0 ? <p name="x">hello vue</p> : <p name="xx">hello react</p>}
      <h2>更新前后为不同的组件</h2>
      {count % 2 === 0 ? <One /> : <Two />}
      <h2>更新前后为相同的组件</h2>
      {count % 2 === 0 ? <Three name="zhangsan" /> : <Three name="lisi" />}
    </div>
  );
}
